<template>
	<view id="home">
		<view class="H5Style">
			<view class="top_img">
				<view class="left" @click="gotoDirectionUse">
					<image src="@/static/ImageTest.jpg" mode="widthFix"></image>
				</view>
				<view class="right"  @click="gotoDirectionUse">
					<image src="@/static/ImageTest.jpg" mode="widthFix"></image>
				</view>
			</view>
			<view class="" style="margin: 20rpx; 0">
				<u-notice-bar :text="combinedString" url="/pages/home/structured/software"></u-notice-bar>
			</view>
			<view class="left">
				<view class="home_topText">数万名创作者正在使用金橙子</view>
				<view class="home_top_search">
					<u-search bgColor="#fff7f3" @blur="search" :action-style="{background: '#fd6500'}" shape="square"
						placeholder="找寻你想要的内容" v-model="searchText">
					</u-search>
				</view>
				<view class="home_suggest">
					<view class="home_suggest_title">
						<view class=" custom-icon custom-icon-xingbiaobiaoqian"> 平台精选推荐</view>
					</view>
					 
					<classifys @Child="selectTag" :a="true" :childIndex="Number(childIndex)"  
						:iconFlag="true" :list="postsAllText">
					</classifys>
				</view>
			</view>
			<view class="right">
				<dynamicList :list="list" ref="dynamicListClick" :initial-value.sync="list" />
				<u-loadmore :status="status" @loadmore="getDynamicListAll" />
			</view>
			<view class="household" @click="NAVPAGE('/pages/content/guidance/guidance')">
				<image src="../../static/guide.png" mode=""></image>
				<text>用户指引</text>
			</view>

		</view>

		<view style="height: 100rpx;" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedIndex: '', // 用于跟踪被点击的标签索引
				searchText: '',
				userTag: ['唱歌', '博客', '游戏', '绘画'],
				pingTaiTag: ['博客', '漫画', '视频', '音乐', '游戏', '写作', '技术', '其他', ],
				list: [],
				cateList: [], //动态分类
				page: 1,
				limit: 10,
				noMoreData: false, // 是否还有更多数据
				loading: false, // 加载状态
				status: 'more', // 加载状态: 'more', 'loading', 'noMore'
				postsAllText: [],
				childIndex: '',
				combinedString:'',
			}
		},
		onShow() {
			this.search();
		},
		mounted() {
			this.getDynamicListAll();
			this.getCateList();
			this.notification()
		},
		methods: {
            notification(){
				this.$api.tzEveryone().then(res=>{
					   const intercom = res.data.map(item => item.title + ':' + item.content);  
				       this.combinedString = intercom.map(item => item.replace(':', ': ')).join(' ');
				})
			},
			search() {
				// 当搜索关键字发生变化时，重置状态和数据
				this.page = 1; // 重置页码
				this.list = []; // 清空列表
				this.status = 'more'; // 重置状态为 more
				this.getDynamicListAll(); // 进行搜索
			},
			// 监听触底
			onReachBottom() {
				// 检查是否正在加载和是否还有更多数据
				if (this.status === 'more') {
					this.getDynamicListAll(); // 获取下一页数据
				}
			},
			getDynamicListAll() {
				this.status = 'loading'; // 设置加载状态为 loading
				this.$api.getDynamicListAll({
						cate_id: this.selectedIndex,
						keyword: this.searchText,
						page: this.page,
						limit: this.limit,
					})
					.then(res => {
						if (res.data && res.data.data.length < 1) {
							this.status = 'noMore'; // 标记没有更多数据
						} else {
							let resList = res.data.data; // 获取实际数据
							this.list = this.list.concat(resList); // 合并新数据
							this.status = 'more'; // 重置状态为 more
							this.page += 1; // 增加页码
						}
					})
					.catch(error => {
						console.error("请求出错:", error); // 错误处理
						this.status = 'more'; // 错误时仍然可以加载更多
					});
			},
			selectTag(data) {
				this.selectedIndex = data; // 更新选中的标签索引
				// 当搜索关键字发生变化时，重置状态和数据
				this.page = 1; // 重置页码
				this.list = []; // 清空列表
				this.status = 'more'; // 重置状态为 more
				this.getDynamicListAll(); // 进行搜索
			},
			getCateList() {
				this.$api.getCateList().then(res => {
					this.cateList = res.data;
				})
				// 获取动态分类列表
				this.$api.getCateList().then(res => {
					this.postsAllText = res.data;
				});
			},
			// 
			gotoFaXian() {
				uni.navigateTo({
					url: '/pages/home/found/found'
				})
			},
			gotoDirectionUse() {
				uni.navigateTo({
					url: '/pages/home/DirectionsUse/DirectionsUse'
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-search__action--active {
		padding: 7px !important;
		/* 使用 px 作为单位 */
		border-radius: 0 10rpx 10rpx 0 !important;
		margin: 0 !important;
		color: #fff !important;
	}

	::v-deep .u-tag--medium {
		padding: 0 !important;
	}

	::v-deep .u-tag--warning {
		height: 65rpx;
	}

	#home {
		width: 100%;

	}

	.top_img {
		width: 95%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;

		.left {
			width: 48%;
		}

		.right {
			width: 48%;
		}

		image {
			width: 100%;
			border: 1rpx #dedede solid;
			border-radius: 40rpx;
		}
	}

	.home_topText {
		width: 90%;
		line-height: 2.5;
		margin: auto;
		text-align: center;
		color: #f86f0a;
	}

	.home_top_search {
		width: 90%;
		margin: auto;
	}

	.home_placeTop {
		width: 90%;
		line-height: 2.5;
		margin: auto;
		font-size: 24rpx;

		.home_placeTop_top {
			display: flex;
			justify-content: space-between;

			text {
				color: #969696;
			}
		}
	}

	.home_placeTop_card {
		width: 90%;
		margin: auto;
		background: #fff5f4;
		display: flex;
		padding: 20rpx;
		justify-content: space-around;
		border-radius: 20rpx;

		.home_placeTop_card_img {
			width: 10%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.home_placeTop_card_content {
			width: 70%;

			.name {
				display: flex;
				line-height: 2;
				justify-content: space-between;

				.right {
					font-size: 20rpx;
					color: #999999;
				}
			}

			.address {
				color: #9b9494;
				font-size: 24rpx;
				line-height: 2;
			}

			.designation {
				line-height: 2;
			}

			.tagStyle {
				line-height: 2;
				display: flex;
				justify-content: space-between;

				.tagStyle_view {
					width: 100%;
					margin: 4rpx;
				}
			}
		}
	}

	.home_suggest {
		width: 90%;
		margin: auto;

		.home_suggest_title {
			width: 100%;
			margin: 40rpx 0;

			.custom-icon-xingbiaobiaoqian {
				color: #f86f0a;
			}
		}

		.home_suggest_tag {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;

			.home_suggest_tag_child {
				width: 21%;
				margin: 10rpx;
			}
		}
	}

	.compoents_list {
		width: 100%;
	}

	.household {
		position: fixed;
		/* #ifdef H5 */
		bottom: 200rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		bottom: 80rpx;
		/* #endif */
		z-index: 700;
		right: 30rpx;
		text-align: center;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
			display: block;
		}

		text {
			font-size: 28rpx;
			color: #ff6600;
			font-weight: bold;
		}
	}
</style>